<template>
    <div class="header" ref="header">
      <!-- 添加背景装饰 -->
      <div class="header-background">
        <div class="glow-line"></div>
      </div>
      
      <div
        v-for="(item, index) in headerList"
        :key="index"
        :class="[
          'header_item',
          { 'header_item--active': activeIndex === index }
        ]"
        @click="chooseName(item,index)"
        @mousemove="item.isHover = true"
        @mouseout="item.isHover = false"
      >
        <!-- 添加内容容器 -->
        <div class="item-content">
          <span class="item-text">{{ item.name }}</span>
          <!-- 添加装饰元素 -->
          <div class="tech-decoration left"></div>
          <div class="tech-decoration right"></div>
        </div>
      </div>
      
      <!-- 活动指示器 -->
      <div class="active_item" ref="activeItem">
        <div class="active-indicator"></div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "ContainerHeader",
  });
  </script>
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted, toRefs } from 'vue';
  import { nextTick } from 'vue';

  interface HeaderItem {
    name: string;
    key: string;
    isHover?: boolean;
    [key: string]: any;
  }

  interface Props {
    headerList: HeaderItem[];
  }

  const props = defineProps<Props>();
  const { headerList } = toRefs(props);
  const emits = defineEmits<{
    (e: 'handleCurrentChange', item: HeaderItem, lastIndex: number): void
  }>();

  const activeIndex = ref(0);
  const lastIndex = ref(0);
  const activeItem = ref<HTMLElement | null>(null);
  const header = ref<HTMLElement | null>(null);

  const chooseName = (item: HeaderItem, index: number) => {
    const headerItems = document.querySelectorAll<HTMLElement>('.header_item');
    if (!headerItems[index]) return;
    
    // 获取整个header的padding
    const headerPadding = 5; // 与CSS中的padding一致
    
    // 获取header_items之间的间距
    const gap = 4; // 与CSS中的gap一致
    
    // 计算当前项目的位置，考虑间距
    const currentItemWidth = headerItems[index].offsetWidth;
    let currentItemLeft = headerPadding; // 从padding开始
    
    // 累加前面所有项目的宽度和间距
    for (let i = 0; i < index; i++) {
      currentItemLeft += headerItems[i].offsetWidth + gap;
    }
    
    if (activeItem.value) {
      activeItem.value.style.width = `${currentItemWidth}px`;
      activeItem.value.style.transform = `translateX(${currentItemLeft}px)`;
    }
    
    activeIndex.value = index;
    emits("handleCurrentChange", item, lastIndex.value);
    lastIndex.value = index;
  };

  const updateActiveItemWidth = () => {
    const headerItems = document.querySelectorAll<HTMLElement>('.header_item');
    if (!headerItems[activeIndex.value]) return;
    
    // 获取整个header的padding
    const headerPadding = 5; // 与CSS中的padding一致
    
    // 获取header_items之间的间距
    const gap = 4; // 与CSS中的gap一致
    
    // 计算当前项目的宽度
    const currentItemWidth = headerItems[activeIndex.value].offsetWidth;
    
    // 计算当前项目的位置，考虑间距
    let currentItemLeft = headerPadding; // 从padding开始
    
    // 累加前面所有项目的宽度和间距
    for (let i = 0; i < activeIndex.value; i++) {
      currentItemLeft += headerItems[i].offsetWidth + gap;
    }
    
    if (activeItem.value && currentItemWidth) {
      activeItem.value.style.width = `${currentItemWidth}px`;
      activeItem.value.style.transform = `translateX(${currentItemLeft}px)`;
    }
  };

  let resizeObserver: ResizeObserver | null = null;

  onMounted(() => {
    // 初始化ResizeObserver
    resizeObserver = new ResizeObserver(() => {
      // 确保在DOM更新后再计算尺寸
      nextTick(() => {
        updateActiveItemWidth();
      });
    });
    
    const headerItems = document.querySelectorAll('.header_item');
    headerItems.forEach(item => {
      resizeObserver?.observe(item);
    });

    // 确保DOM已经渲染后再初始化active_item的宽度
    nextTick(() => {
      // 初始化 active_item 的宽度
      const firstHeaderItem = document.querySelector<HTMLElement>('.header_item');
      if (firstHeaderItem && activeItem.value) {
        // 获取整个header的padding
        const headerPadding = 5; // 与CSS中的padding一致
        
        // 设置初始宽度和位置
        activeItem.value.style.width = `${firstHeaderItem.offsetWidth}px`;
        activeItem.value.style.transform = `translateX(${headerPadding}px)`;
      }
    });
  });

  onUnmounted(() => {
    if (resizeObserver) {
      resizeObserver.disconnect();
    }
  });
  </script>
  
  <style lang="scss" scoped>
  .header {
    width: 90%;
    display: flex;
    position: relative;
    padding: 5px;
    background: linear-gradient(
      180deg,
      rgba(28, 41, 69, 0.8) 0%,
      rgba(28, 41, 69, 0.6) 100%
    );
    border-radius: 8px;
    gap: 4px;
    z-index: 1;

    // 背景装饰
    .header-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      border-radius: 8px;
      z-index: -1;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          90deg,
          rgba(24, 95, 170, 0.05) 0%,
          rgba(24, 95, 170, 0.1) 50%,
          rgba(24, 95, 170, 0.05) 100%
        );
      }

      .glow-line {
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(0, 209, 237, 0.3) 20%,
          rgba(0, 209, 237, 0.3) 80%,
          transparent
        );
        box-shadow: 0 0 8px rgba(0, 209, 237, 0.2);
      }
    }

    .header_item {
      position: relative;
      flex: 1;
      height: 42px;
      margin: 0;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s ease;

      .item-content {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        
        .item-text {
          color: rgba(255, 255, 255, 0.7);
          font-size: 15px;
          font-weight: 500;
          transition: all 0.3s ease;
        }

        .tech-decoration {
          position: absolute;
          width: 2px;
          height: 0;
          background: #00d1ed;
          transition: height 0.3s ease;
          opacity: 0;

          &.left {
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
          }

          &.right {
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 209, 237, 0.1),
          transparent
        );
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover {
        background: rgba(24, 95, 170, 0.2);

        .item-text {
          color: rgba(0, 209, 237, 0.9);
          text-shadow: 0 0 8px rgba(0, 209, 237, 0.3);
        }

        &::before {
          opacity: 1;
        }

        .tech-decoration {
          height: 12px;
          opacity: 0.7;
        }
      }

      &--active {
        background: rgba(24, 95, 170, 0.3);
        
        .item-text {
          color: #00d1ed;
          text-shadow: 0 0 10px rgba(0, 209, 237, 0.4);
        }

        .tech-decoration {
          height: 16px;
          opacity: 0.8;
        }

        &::before {
          opacity: 1;
          background: linear-gradient(
            180deg,
            rgba(0, 209, 237, 0.15),
            rgba(0, 209, 237, 0.05)
          );
        }
      }
    }

    .active_item {
      position: absolute;
      height: 42px;
      top: 5px;
      left: 0;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
      z-index: 0;

      .active-indicator {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(24, 95, 170, 0.2);
        border-radius: 6px;
        border: 1px solid rgba(0, 209, 237, 0.2);
        box-shadow: 
          inset 0 0 15px rgba(0, 209, 237, 0.08),
          0 0 10px rgba(0, 209, 237, 0.1);
        
        &::after {
          content: '';
          position: absolute;
          bottom: 4px;
          left: 20%;
          right: 20%;
          height: 2px;
          background: linear-gradient(
            90deg,
            transparent,
            #00d1ed,
            transparent
          );
          border-radius: 1px;
          box-shadow: 0 0 6px rgba(0, 209, 237, 0.3);
        }
      }
    }
  }

  // 添加动画
  @keyframes glow-pulse {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes border-flow {
    0% {
      background-position: 0% 0;
    }
    100% {
      background-position: 100% 0;
    }
  }
  </style>
  
